<template>
  <div>
    <div class="ic">
      <el-upload
        class="avatar-uploader"
        :action="uploadUrl"
        :show-file-list="false"
        :headers=Authorization
        name="fileName"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar01">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        <div slot="tip" class="el-upload__tip changeimg">点击图片修改头像</div>
      </el-upload>
    </div>
    <div class="noic">
      <div class="role_up">
        <div class="role_lef">
          <div class="height40">
            <span class="wid4">名称</span>
            <span><el-input v-model="formInline.name" maxlength="40" size="mini" ></el-input></span>
          </div>
          <div class="height40">
            <span class="wid4">会长</span>
            <span>{{formInline.chairmanName}}</span>
          </div>
          <div class="height40">
            <span class="wid4">会长ID</span>
            <span>{{formInline.chairmanId}}</span>
          </div>
        </div>
        <div class="role_rig">
          <div class="height40">
            <span class="wid4">频道ID</span>
            <span>{{unionChannel.chanId}}</span>
          </div>
          <div class="height40">
            <span class="wid4">创立时间</span>
            <span class="clsj">{{formInline.createTime}}</span>
          </div>
          <div class="height40">
            <span class="wid4">成员数量</span>
            <span>{{formInline.number}}</span>
          </div>
        </div>
      </div>
      <br>
      <div style="width:15%;height:10px;"></div>
      <div class="role_dow">
        <div class="yypdc">
          <div class="yypd">拥有频道</div>
          <div class="pdxq_flo">
          <div class="pdxq" v-for="item in formInline.channels">
            <!--<div class="pdxq1">
              <span>承接（ID:12886786）</span>
              <el-button type="primary">设为工会成员快速进入频道</el-button>
              <br>
            </div>-->
            <p> {{item.name}}(ID:{{item.chanId}})<a class="rra"><span @click="fastInChannel(item.chanId,item.name)" style="color: #FF00FF">

               <el-button size="small" type="primary" class="tdbut">设为公会成员快速进入频道</el-button>
              </span>
              </a>
            </p>
          </div>
          </div>

        </div>
        <div style="width:100px;height:10px;"></div>
        <br>
        <div class="ghjs">
          <span class="span1">介绍</span>
          <span class="span2"><el-input type="textarea" class="textaaa" maxlength="100" style="" v-model="formInline.description"></el-input><!--{{formInline.description}}--></span>
          <!--<span style="font-size:12px;color:purple;margin-top:20px!important;position:absolute;margin-left:30px;">编辑</span>-->
        </div>
        <div class="ghjs">
          <span class="span1">招募要求</span>
          <span class="span2">
            <el-input class="textaaa" type="textarea"  maxlength="100" v-model="formInline.conscribe"></el-input>
          </span>
<!--          <div class="azm_form">-->
<!--          <el-form class="zm_form" ref="form" :model="form" label-width="80px">-->
<!--            <el-form-item  style="font-size:14px;color:black" label="">-->
<!--              <el-input class="textaaaa" type="textarea"  maxlength="100" v-model="formInline.conscribe"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-form>-->
          </div>

              <!--<el-button @click="cancel" size="small">取消</el-button>-->
              <el-button type="primary" :disabled="disableButton" class="purple_but butbut" @click="edit" size="small" :style="buttonColor">确认</el-button>

        </div>
      </div>
    </div>



  </div>
</template>
<script>
import { getUnionDetailAPI , getChannelAPI ,editUnionDetailAPI} from "@/api/user";
import { getToken } from '@/utils/auth' //
import RoleEdit from "./components/BlogEdit";
import { mapGetters } from "vuex";
//import moment from 'moment'
export default {
  // 角色管理
  name: "DetailData",
  components: {
    RoleEdit
  },
  data() {
    return {
      buttonColor:this.buttonColorDisable,
      buttonColorEnable:'background:rgb(194,128,255)', //紫色
      buttonColorDisable:'background:rgb(192,192,192)',// 灰色
      disableButton:true,
      formInline: {
        cashAccount: '',  //提现账户
        conscribe: '',    //招募邀请
        description: '',  //工会要求
        logo: '',         //图标
        name: '',          //工会名称
        defaChal:'',        //快速进入频道（频道id号）
        id:''
      },
      formInlineCopy:{},
      token:{
        Authorization:getToken()
      },
      Authorization:'',
      imageUrl:'',
      uploadUrl:  this.UPLOADURL,
      unionChannel:'',
      dialog: {
        status: false,
        id: null
      },
      loading: false,
      tableData: []
    };
  },
  computed: {
    ...mapGetters(["buttons"])
  },
  methods: {
    beforeAvatarUpload(file) {
      debugger
      const isJPG = file.type === 'image/jpeg';
      const isJPEG = file.type === 'image/jpg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG && !isJPEG) {
        this.$message.error('只支持jpg、jpeg、png格式文件');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }
      return isJPG || isJPEG || isPNG && isLt2M;
    },
    cancel(){
      this.$router.go(0);
    },
    // 打开编辑页面
    openEdit(obj) {
      this.dialog.id = obj.Id;
      this.dialog.status = true;
    },
    fastInChannel(id,name){

      this.formInline.defaChal = id
      alert('您选择设置的快速进入频道是：'+name)
    },
    edit() {
      if(this.formInline.name == ''){
        this.$message.error('公会名称不能为空')
        return
      }
        editUnionDetailAPI(this.formInline).then(res => {
          this.loading = false;
          if (res.rtnInfo.data == 1) {
            this.$message.success('操作成功')
            //this.getRoleList();
            location.reload()
          } else {
            this.$message.error(res.rtnInfo.message);
          }
          this.getRoleList();
        });
    },
    // 操作成功更新列表
    success() {
      this.getRoleList();
    },
    close() {
      this.dialog.status = false;
      this.dialog.id = null;
    },
    // 点击查询事件
    query() {
      this.formInline.pageNum = 1;
      this.getRoleList();
    },
    // 获取列表
    getRoleList() {
      this.loading = true;
      getUnionDetailAPI().then(res => {
        this.loading = false;
        if (res.rtnInfo.code === 0) {
          this.formInline = res.rtnInfo.data;
          this.formInlineCopy = JSON.parse(JSON.stringify(res.rtnInfo.data));
          this.imageUrl = this.formInline.logo
        } else {
          this.$message.error(res.message);
        }
      });
      // 获取工会频道信息
      // 获取频道信息
      getChannelAPI().then(res => {
        this.loading = false;
        if (res.rtnInfo.code === 0) {
          this.unionChannel = res.rtnInfo.data;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    handleAvatarSuccess(res, file) {
      debugger
      this.imageUrl = URL.createObjectURL(file.raw);
      this.formInline.logo = res.rtnInfo.data[0]
    },
    // 选择文件发改变的钩子
    handleChange(file, fileList) {
      debugger
      //this.formInline.logo = file.raw
    },
    // 移除文件的钩子
    handleRemove(file, fileList) {
      this.formInline.logo = null
    },
  },
  mounted() {
    this.Authorization={Authorization:getToken()}
    this.getRoleList();
  },//
  watch: {
    formInline: {
      handler: function() {
        if(this.formInline.logo != this.formInlineCopy.logo || this.formInline.name != this.formInlineCopy.name || this.formInline.description != this.formInlineCopy.description || this.formInline.conscribe != this.formInlineCopy.conscribe){
          this.disableButton = false
          this.buttonColor = this.buttonColorEnable
        }else{
          this.disableButton = true
          this.buttonColor = this.buttonColorDisable
        }
      },
      deep: true
    }
  }
};
</script>
<style>
  .role_up {
    height: auto;
    width: 98%;
    margin-top: 3%;
}
 .role_lef {
    float: left;
    width: 48%;
    height: 100px;
    margin-left: 3%;
}
  .role_lef span{
      display:inline-block;
      /* width:100px;
      margin-top:20px; */
  }
  .role_rig span{
      display:inline-block;
      /* width:100px;
      margin-top:20px; */
  }
  .role_rig {
    float: left;
    width: 45%;
    height: 100px;
    margin-left: 3%;
}
 .role_dow {
    margin-top: 9%;
}
  .yypdc {
    width: 100%;
    height: auto;
    margin-left: 3%;
    margin-top: 96px;
}
  .yypd {
    width: 100px;
    float: left;
    /* margin-top: 15px; */
}
.pdxq{
    width:90%;
    /* float: left; */
}
.ghjs {
    margin-left: 3%;
    margin-top: 7%;
}
.ghjs span{
    display: inline-block;
}
.ghjs span1{
    display: inline-block;
    width:300px;
    height:50px;
    position: relative;
}
 .textaaa.el-textarea {
    margin-left: 1%;
    width: 36%;
}
.textaaa {
    min-height: 33px;
    margin-top: -1.5%;
    position: absolute;

}
/* span.span2 {
    width: 40%;
    margin-left: 31px;
} */
/*.el-form-item__label {*/
/*    text-align: right;*/
/*    float: left;*/
/*    font-size: 16px;*/
/*    color: black;*/
/*    line-height: 40px;*/
/*    padding: 0 12px 0 0;*/
/*    -webkit-box-sizing: border-box;*/
/*    box-sizing: border-box;*/
/*}*/
span.zm_sp {
    display: inline-block;
    margin-left: 2.4%;
    margin-top: 0px;
    position: absolute;
}
.zm_form {
    /* position: relative; */
    /*margin-left: 15%;*/
    /*margin-top: 69px;*/
}
  .ic {
    width: 143px;
    height: 180px;
    float: left;
    /* background: lightgrey; */
    margin-left: 2%;
    margin-top: 4.5%;
  }
  .noic {
    float: left;
    margin-left: 2%;
    margin-top: 2%;
    height: auto;
    width: 77%;
}
  .pdxq_flo {
    float: left;
    width: 77%;
    height: auto;
    margin-top: -27px;
    margin-left: 0.5%;
}
/*.purple_but {*/
/*    color: #FFF;*/
/*    background-color: purple;*/
/*    border-color: purple;*/
/*}*/

   /*我新加的图片的样式*/
 /*.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    height: 140px;
    overflow: hidden;
    width: 140px;
    margin-top: 42px;
    margin-left: 37px;
}
   .avatar-uploader .el-upload:hover {
     border-color: #409EFF;
   }
   .avatar-uploader-icon {
     font-size: 28px;
     color: #8c939d;
     width: 50px;
     height: 50px;
     line-height: 50px;
     text-align: center;
   }
   .avatar1 {
    width: 140px;
    height: 140px;
    display: block;

}*/
span.clsj {
    width: 200px!important;
}
.pdxq a {
    display: inline-block;
    width: 57%;
    /* margin-left: 10px; */
    float: right;
}
.height40 {
    height: 40px;
}
span.wid4 {
    width: 100px;
}
.pdxq {
    width: 90%;
    /* float: left; */
    height: 26px;
    /* text-align: center; */
    line-height: 40px;
}
button.el-button.tdbut.el-button--primary {
    background: rgb(194,128,255);
}
.textaaa.el-textarea {
   margin-left: 2.6%;
    width: 66%;
    overflow-y: hidden;
}
.textaaaa.el-textarea {
    display: inline-block;
    width: 106%;
    vertical-align: bottom;
    font-size: 14px;
    margin-left: -65px;
    margin-top: 14px;

    /* height: 75px; */
}
.zm_form {
    position: relative;
    margin-top: 69px;

}
/* .butbut{
  margin-left: 82%;
    margin-top: -17px;
    margin-bottom: 8px;
} */
.el-form-item.butbut {
    margin-left: 68%;
    margin-top: -16px;
    /* margin-bottom: 16px; */
}
  button.purple_but.butbut {
    margin-left: 46%;
    margin-top: 55px;
    font-size: 16px;
    padding: 5px 45px 5px 45px;
    /* color: white; */
  }
  .el-upload__tip.changeimg {
    width: 120px;
    margin-left: 10px;
    text-align: center;
    height: 16px;
    background: mediumpurple;
    line-height: 16px;
    color: white;
    border-radius: 4px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar01 {
    width: 140px;
    height: 140px;
    display: block;
  }
  .zmyq {
    margin-top: 73px;
    margin-left: 3%;
  }
</style>

